<!DOCTYPE html>
<html>
<head>
<script class="jsbin"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Session join</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
	$(document).ready(
			function() {
				$('#join').click(
						function() {
							var _session_id = $('#session_id').val();
							$('#session_image').attr(
									"src",
									"gifsocket?session_id="
											+ _session_id);
							$('#session_logon').hide();
							
							    $('#session_image').bind('contextmenu',function(e) {
							    // check if right button is clicked
							    if(e.button === 2) {
							    	        e.preventDefault();

							    	var offset = $(this).offset();
									  var _x = e.clientX - offset.left;
									  var _y = e.clientY - offset.top;
									  $.get("mouse/right_click", { x: _x, y: _y, sessionID: _session_id } );
							    }
							});
							
							$('#session_image').click(function(e) {
							  var offset = $(this).offset();
							  var _x = e.clientX - offset.left;
							  var _y = e.clientY - offset.top;
							  $.get("mouse/click", { x: _x, y: _y, sessionID: _session_id } );
							 });
						});
			});
</script>
</head>
<body>
	<form action="gisocket">
		<div id="session_logon">
			<table>
				<tr>
					<td>Session ID</td>
					<td><input type="text" id="session_id"></td>
					<td><input type="button" id="join" value="Join"></td>
				</tr>
				<tr>
			</table>
		</div>
		<img src="" width="100%" id="session_image" />
	</form>
</body>
</html>